<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>员工列表</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body a {
            text-decoration: none;
            color: #0d3a4b;
        }

        .active {
            color: #ffffff;
        }

        .wrap {
            width: 700px;
            height: 500px;
            background-color: skyblue;
            margin: 0 auto;
            position: relative;
        }

        .wrap #table {
            width: 460px;
            border-radius: 12px;
            position: absolute;
            left: 50%;
            top: 160px;
            transform: translateX(-50%);
            box-sizing: border-box;
            overflow: hidden;
        }

        .wrap #table thead {
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
            color: #fff;
            background: #4cbfe5;
        }

        .wrap #table thead a {
            color: #fff;
        }

        .wrap #table tbody {
            color: #19c2ff;
        }

        .wrap #table tbody a {
            color: #19c2ff;
        }

        .wrap #table tbody tr {
            background: #fff;
        }

        .ctrl {
            position: absolute;
            left: 200px;
            top: 100px;
        }

        .ctrl div {
            width: 300px;
            line-height: 30px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }

        h1 {
            text-align: center;
            padding-top: 20px;
            color: white;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <h1>员工列表</h1>
        <div class="ctrl">
            <div class="age_sort nu">
                <a href="javascript:;">年龄从小到大</a>
                <a href="javascript:;">年龄从大到小</a>
                <a href="javascript:;" class="active">默认排序</a>
            </div>
            <div class="gender_show">
                <a href="javascript:;">只显示男性</a>
                <a href="javascript:;">只显示女性</a>
                <a href="javascript:;" class="active">默认</a>
            </div>
        </div>
        <table id="table">
            <thead>
                <tr>
                    <th>id</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <th>0</th>
                    <th>小明</th>
                    <th>24</th>
                    <th>男</th>
                </tr> -->
            </tbody>
        </table>
    </div>
    <script>
        var data = [
            {
                id: 1,
                name: '小明',
                age: 24,
                gender: '男'
            },
            {
                id: 2,
                name: '小芳',
                age: 30,
                gender: '女'
            },
            {
                id: 3,
                name: '小美',
                age: 31,
                gender: '女'
            },
            {
                id: 4,
                name: '小刚',
                age: 21,
                gender: '男'
            },
            {
                id: 5,
                name: '小琪',
                age: 18,
                gender: '女'
            }
        ];

        var tbody = document.querySelector('tbody');
        
        Copy(data);
        // 动态渲染
        function Copy(data) {
            data.forEach(function (item) {
                var tr = document.createElement('tr');
                for(var key in item){
                var th = document.createElement('th');
                // appendChild 接受的参数是对象
                // innerHTML 接受的参数是字符串
                th.innerHTML = item[key]
                tr.appendChild(th)
                }
                tbody.appendChild(tr)
            })
        }
        
        // 年龄排序:1.处理数据 2.重新渲染
        // 1.处理数据
        var ageEles = document.querySelectorAll('.age_sort a');
        // 把所有的排序方法放在一个数组里面 进行调用
        var sortArr = [ function(data){
            // 深拷贝 解决数组方法排序 会改变原数组
            var res = JSON.parse( JSON.stringify(data) );
            res.sort(function(a,b){
                return a.age - b.age;  // 升序
            })
            return res;
        },function(data){
            // 深拷贝 解决数组方法排序 会改变原数组
            var res = JSON.parse( JSON.stringify(data) );
            res.sort(function(a,b){
                return b.age - a.age;  // 降序
            })
            return res;
        },function(data){
            return data;
        }
        ];

        // 2.根据数据重新渲染
        // 绑定点击事件
        ageEles.forEach(function(item,index){
            item.onclick(function(){
                // 根据下标来 调用数据里面对应的方法
                var res = sortArr[index](data);
                // 把返回的res数组 重新当做参数（数据）渲染
                Copy(res);
            })
        })

        // 性别筛选 1.筛选数据 2.重新渲染
        var genderEles = document.querySelectorAll(".gender_show a");
        // 把所有的筛选方法放在一个数组里面 进行调用
        var genderArr = [function (data) {
            // filter数组方法  对数组进行过滤。
            // 创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
            return data.filter(function (item) {
                return item.gender === "男";
            })

        }, function (data) {
            return data.filter(function (item) {
                return item.gender === "女";
            })

        }, function (data) {
            return data;
        }]

        // 绑定事件
        genderEles.forEach(function (item, key) {
            item.onclick = function () {
                // 根据点击标签的 下标 来调用数组的方法
                var res = genderArr[key](data);
                // res 返回的是一个已经判断好的数组
                // 重新渲染
                Copy(res);
            }
        })
    </script>
</body>

</html>